<template>
  <div class="home">
    <div :class="$style.head">
      <img src="./../assets/head.png" />
    </div>
    <div :class="$style.header">
      <div v-for="head in headers" :key="head.to" @click="scrollToHandle(head)">
        {{ head.name }}
      </div>
    </div>
    <swiper :class="$style.swiper" :options="swiperOption">
      <swiper-slide :class="$style.slide">
        <img src="./../../public/banner.png" />
      </swiper-slide>
      <swiper-slide :class="$style.slide">
        <img src="./../../public/banner1.png" />
      </swiper-slide>
      <swiper-slide :class="$style.slide">
        <img src="./../../public/banner2.png" />
      </swiper-slide>
      <swiper-slide :class="$style.slide">
        <img src="./../../public/banner3.png" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { value, onMounted } from "vue-function-api";
import { banner, headers } from "./util";

export default {
  setup(props, ctx) {
    const swiperOption = value({
      autoplay: true,
      loop: true,
      pagination: {
        el: ".swiper-pagination"
      }
    });
    const scrollToHandle = ({ to }) => ctx.emit("scrollTo", to);
    onMounted(() => {
      swiperOption.value = {
        autoplay: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      };
    });
    return {
      headers,
      banner,
      swiperOption,
      scrollToHandle
    };
  }
};
</script>

<style lang="scss" module>
@import "./../common/util.scss";
.head {
  width: 100%;
  height: 60px;
  background: #fff;
  @include center;
  img {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 60%;
  }
}
.header {
  @include center;
  background: $themecolor;
  div {
    @include center;
    font-size: 15px;
    width: 100%;
    height: 40px;
    color: #fff;
  }
}
.swiper {
  height: 218px;
  background-color: #434039;
  .slide {
    height: 100%;
    background-color: #434039;
  }
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
